<template>
    <div class="primary-comment">
        <div class="comment-header">
            <img :src="f_comments.author_image || '/public/4.jpg'" class="comment-avatar" alt="用户头像">
            <div class="user-info">
                <span class="username">{{f_comments.f_username || '匿名用户'}}</span>
                <span class="comment-date">{{formatDate(f_comments.date)}}</span>
            </div>
        </div>

        <div class="comment-content">
            {{f_comments.content}}
        </div>

        <div class="comment-actions">
            <button  
             :class="isLiked==1 ? 'action-btn like-btn liked': 'action-btn like-btn unliked' " 
                @click="toggleLike">
               <span><Icon type="md-heart-outline" />
              </span>
                <span>{{ likeCount }}</span>
            </button>
            <button class="action-btn reply-btn" @click="showReplyBox = !showReplyBox">
                <span><Icon type="ios-undo-outline" /></span>
                <span>回复</span>
            </button>
        </div>

        <div v-show="f_comments.reply_count>0"  class="reply-toggle" @click="toggleReplies">
            <span >{{ show_sreply ? '收起回复' : `查看回复` }}</span>
            <svg  class="toggle-icon" :class="{ 'expanded': show_sreply }" viewBox="0 0 24 24">
                
            </svg>
        </div>
 
        

            <div class="reply-container" v-show="showReplyBox">
            <textarea 
                v-model="replyContent" 
                class="styled-textarea" 
                placeholder="回复..."
                rows="5"
            ></textarea>
            <div class="reply-actions">
                <button class="cancel-btn" @click="showReplyBox=fasle">
                <i class="fas fa-times"></i> 取消
                </button>
                <button class="submit-btn" @click="submitReply">
                <i class="fas fa-paper-plane"></i> 提交
                </button>
            </div>
            </div>



        <div class="comment-replies" v-show="show_sreply">
            <SecondaryCommentList :fauthor_id="fauthor"
             :article_id="f_comments.id" 
             :fcomment_uuid="f_comments.uuid"
              ref="secondaryCommentList"
             />
        </div>
    </div>
</template>

<script setup>
import SecondaryCommentList from './SecondaryCommentList.vue'
import { ref, computed, onMounted ,watch, inject,defineEmits, reactive} from 'vue';
import { set_text_comments_f_like, put_text_comments_second } from "@/api/community/main"
let secondaryCommentList=ref()
const user=inject('user')()
const props = defineProps({ 
    f_comments: {
        type: Object,
        required: true
    },
    user: {
        type: Object,
        default: () => ({})
    }
})
const show_sreply = ref(false);
const showReplyBox = ref(false);
const replyContent = ref('');
const likeCount = ref(props.f_comments.like_count || 0);
const isLiked = ref(props.f_comments.user_to_comment?.like || 0);
const truelike=ref(props.f_comments.user_to_comment?.like || 0);
const fauthor = ref(props.f_comments.author);
watch(()=>isLiked.value,(newVal,oldVal)=>{
    // console.log(newVal,oldVal)
})
watch(()=>props.f_comments,(newVal,oldVal)=>{
    
})

const formatDate = (dateString) => {
    const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
    return new Date(dateString).toLocaleDateString(undefined, options);
};

const toggleLike = async () => {
   if (!props?.user) { failure("未登录!"); return}
    isLiked.value =isLiked.value ? 0 : 1;
    likeCount.value += isLiked.value ? 1 : -1;
    const judge = await set_text_comments_f_like(
        props.f_comments.uuid,
        props?.user?.get_user()?.id, truelike.value ? 0 : 1)
    if (judge == 0) { 
        isLiked.value =isLiked.value ? 1 : 0
        likeCount.value += isLiked.value ? -1 : 1;
    }
    truelike.value = isLiked.value
};


const toggleReplies = () => {
    show_sreply.value = !show_sreply.value;
};

const submitReply = async () => {
    if (!replyContent.value.trim()) return;
    // 这里应该是调用API提交回复的逻辑
    const data = await put_text_comments_second(
        props.f_comments.id,
        props.f_comments.author, user.value.get_user().id
        , replyContent.value, props.f_comments.uuid,
        0)
    secondaryCommentList.value.addComment(data)
    props.f_comments.reply_count++ || (props.f_comments.reply_count = 1)
    replyContent.value = '';
    // 清空并关闭回复框
    replyContent.value = '';
    showReplyBox.value = false;
};
onMounted(() => { 
    // console.log(props.f_comments)
})
</script>

<style scoped>
.primary-comment {
    background-color: #fff;
    border-radius: 12px;
    padding: 18px;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.primary-comment:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 14px;
    border: 2px solid #f5f5f5;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.username {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.comment-date {
    font-size: 12px;
    color: #909090;
    margin-top: 3px;
}

.comment-content {
    width: 100%;
    word-break: break-word; /* 长单词自动换行 */
    overflow-wrap: break-word; /* 兼容旧浏览器 */
    white-space: pre-wrap; /* 保留换行符，同时允许自动换行 */
    margin-bottom: 16px;
    padding: 0 6px;
    line-height: 1.6;
    color: #333;
    font-size: 15px;
}

.comment-actions {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    margin-bottom: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: #f8f8f8;
}

.action-btn .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.like-btn.active, .like-btn:hover {
    color: #ff2442;
}

.reply-btn:hover {
    color: #1890ff;
}

.reply-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1890ff;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 12px;
    user-select: none;
}

.reply-toggle:hover {
    text-decoration: underline;
}

.toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.toggle-icon.expanded {
    transform: rotate(180deg);
}

.reply-container {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.styled-textarea {
  width: 100%;
  padding: 15px;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  min-height: 100px;
  outline: none;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  resize: none;
}

.styled-textarea:focus {
  background-color: #fff;
  border-bottom-color: #4285f4;

}

.styled-textarea::placeholder {
  color: #aaa;
  font-style: italic;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  background-color: #f5f5f5;
}

.cancel-btn, .submit-btn {
  padding: 8px 16px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.cancel-btn {
  background-color: #f1f1f1;
  color: #666;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.submit-btn {
  background-color: #4285f4;
  color: white;
}

.submit-btn:hover {
  background-color: #3367d6;
}

.submit-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.liked{
    color:red;
}
.unliked{
    color: black;
}
</style>